<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">

    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>

    <script src="js/urlutils.js"></script>
    <script src="js/logout.js"></script>
    <style>
        /* cart_order.css */

        /* 购物车订单样式 */
        .cart-order {
            margin-top: 20px;
        }

        /* 订单项目样式 */
        .order-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 30px; /* Increased spacing between items */
            border-radius: 8px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 订单信息样式 */
        .order-info {
            line-height: 1.6;
        }

        .order-info .label {
            font-weight: bold;
        }

        .order-info p {
            margin: 5px 0;
        }

        /* Spacing between shopping cart tabs */
        .containerX {
            display: flex;
            justify-content: space-between;
        }

        .rightX {
            flex: 1;
            margin-left: 20px; /* Adjust as needed */
        }
        /*.order-info span {*/
        /*    margin: 0px 100px 0px 0px; !* Adjusted margin for spacing *!*/
        /*}*/
        /*.action-buttons {*/
        /*    display: flex;*/
        /*    justify-content: flex-end;*/
        /*    margin-top: 10px;*/
        /*}*/

        /*.action-buttons button {*/
        /*    margin-left: 10px;*/
        /*    padding: 5px 10px;*/
        /*    border: none;*/
        /*    border-radius: 5px;*/
        /*    background-color: #007bff;*/
        /*    color: white;*/
        /*    cursor: pointer;*/
        /*}*/

        /*.action-buttons button:hover {*/
        /*    background-color: #0056b3;*/
        /*}*/
        .action-buttons {
            margin-right: 50px;
        }

        .action-buttons button {
            display: block; /* Change display to block */
            margin-bottom: 5px; /* Add margin-bottom to separate buttons */
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }

        .action-buttons button:hover {
            background-color: #0056b3;
        }

    </style>
</head>
<body>
<div class="nav">
    <div class="flag">
        <img src="image/pen.svg" alt="logo">
        <div class="title">宝克书写笔销售系统</div>
    </div>

    <div class="page">
        <a href="seller_list.html">商品列表</a>
        <a href="shopping_cart.html">购物车</a>
        <a href="order_list.html">订单管理</a>
        <a href="user_info.html">个人中心</a>
        <a href="javascript:logout()">注销</a>
    </div>
</div>

<div class="containerX">
    <div class="rightX">
        <h3>订单管理</h3>
        <!-- 购物车订单区域 -->
        <div class="cart-order">
            <!-- 订单项目 -->
<!--            <div class="order-item">-->
<!--                <div class="order-info">-->
<!--                    <p><span class="label">商品：</span>商品A</p>-->
<!--                    <p><span class="label">数量：</span>1</p>-->
<!--                    <p><span class="label">总价：</span>99.9</p>-->
<!--                    <p><span class="label">时间：</span>2024-04-03</p>-->
<!--                </div>-->
<!--                &lt;!&ndash; Buttons &ndash;&gt;-->
<!--                <div class="action-buttons">-->
<!--                    <button class="remove-from-cart">查看详情</button>-->
<!--                    <br>-->
<!--                    <button class="checkout">删除订单</button>-->
<!--                </div>-->
<!--            </div>-->
            <!-- 在此添加更多订单项目 -->
        </div>
    </div>
</div>
<script type="text/javascript">
    // 初始化页面（将用户信息和文章信息显示到页面上）
    function init() {
        // 2.向后端请求数据
        jQuery.ajax({
            url: "/order/getSettlementOrders",
            type: "GET",
            success: function (res) {
                // 3.将数据展示给用户
                if (res.code == 200) {
                    // 获取文章信息
                    var list = res.data;
                    var createHtml = "";
                    if (list != null && list.length > 0) {
                        // 获取数据成功
                        for (var i = 0; i < list.length; i++) {
                            var art = list[i]; // 文章对象
                            createHtml += '<div class="order-item" id="' + art.id +'">';
                            createHtml += '<div class="order-info">';
                            createHtml += '<p><span class="label">商品：</span>';
                            createHtml += art.product.productName + '</p>';
                            createHtml += '<p><span class="label">数量：</span>';
                            createHtml += art.productQuantity + '</p>';
                            createHtml += '<p><span class="label">总价：</span>';
                            createHtml += art.orderAmount + '</p>';
                            createHtml += '<p><span class="label">时间：</span>';
                            var date = new Date(art.createTime);
                            // 格式化日期
                            var formattedDate = date.toLocaleString(); // 使用默认的本地化格式
                            createHtml += formattedDate + '</p></div>';
                            createHtml += '<div class="action-buttons">';
                            createHtml += '<button class="remove-from-cart" onclick="showDetail(';
                            createHtml += art.product.id + ')">';
                            createHtml += '查看详情</button><br>';
                            createHtml += '<button class="checkout" onclick="delOrder(';
                            createHtml += art.id + ')">';
                            createHtml += '删除订单</button>';
                            createHtml += '</div></div>';
                            console.log(createHtml)
                        }
                    } else {
                        // 文章列表为空
                        createHtml += "<h3 style='text-align: center; margin-top:10px'>购物车暂无订单</h3>";
                    }
                    jQuery(".cart-order").html(createHtml);
                } else {
                    alert("查询失败:" + res.meg);
                }
            }
        });

    }

    init();

    function showDetail(id) {
        // 1.校验参数
        if (id == null || id <= 0) {
            alert("参数错误!");
            return false;
        }
        location.href = "seller_detail.html?id="+id;
    }

    function delOrder(id) {
        // 1.校验参数
        if (id == null || id <= 0) {
            alert("参数错误!");
            return false;
        }
        // 2.向后端请求数据
        jQuery.ajax({
            url:"/order/delOrder",
            type:"POST",
            data:{
                "id":id
            },
            success:function(res) {
                // 3.将数据展示给用户
                if (res.code == 200) {
                    $("#" + id).remove();
                    alert("删除订单成功！");
                } else {
                    alert("删除订单失败:"+res.meg);
                }
            }
        });
    }
</script>
</body>
</html>